<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/userlogin.css" media="all">
    <link rel="stylesheet" href="../css/userRegister.css" media="all">
</head>
<body>
<div id="container">
    <div class="top">
        <div class="icon_box">
            <div>视频教学网</div>
            <div>www.videostudy.com</div>
        </div>

    </div>
    <div id="main">
        <div id="inner_box">
            <div><img src="../img/img1.png"></div>
            <div>
                <div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>用户注册</legend>
                    </fieldset>
                    <form class="layui-form" action="">


                        <div class="layui-form-item">
                            <label class="layui-form-label">注册账号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" lay-verify="required" autocomplete="off" lay-reqtext="用户名不能为空" placeholder="请输入账号" class="layui-input">
                            </div>
                        </div>



                        <div class="layui-form-item">
                            <label class="layui-form-label">设置密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="password" name="password" lay-verify="pass"  placeholder="请填写6到12位密码" autocomplete="off" class="layui-input">
                            </div>

                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="pwdagain"  lay-verify="pwdagain"  placeholder="再次输入密码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"  style="margin-left: 45px">
                                <text  id="tip" hidden style="color: #c40000">两次密码不一致，请重新输入</text>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="btnSubmitRegister">立即注册</button>
                                <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                            </div>
                        </div>

                    </form>
                    <div class="buttom">

                        <div class="nowrap">已有账号？<button onclick="login()" style="cursor: pointer; color: #1E9FFF;border: none;background-color: white">去登录</button></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>



<script src="../layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','jquery','layer'], function(){
       var form = layui.form
        var $ = layui.jquery, layer = layui.layer;

        //自定义验证规则
        form.verify({
           pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

        form.on('submit(btnSubmitRegister)', function (data) {
            $.ajax({
                url: '../user/adduser',
                type: 'POST',
                dataType: 'JSON',
                contentType:"application/json",
                data: JSON.stringify(data.field),
                success: function (res) {
                    console.log(res)
                    if (res.code==200){
                        layer.msg('注册成功');
                        window.location.href = "userLogin"
                    }
                    if (res.code == 999999){
                        layer.msg('此账号已被注册！');
                    }

                }
            })
            return false;
        });
       // document.getElementById('tip').hidden=false
    });

    function login(){
        window.location.href="userLogin"
    }

</script>

</body>
</html>